<template>
    <!--弹出窗-->
    <modal ref="modal_1"
           :title="title"
           :isCloseConfirm="isCloseConfirm"
           @modalOpened="opened">

        <avue-form :option="option"
                   ref="form"
                   v-model="form"
                   @submit="onSubmit"></avue-form>

        <!--底部按钮块, 默认只有"取消"按钮-->
        <template #footerButton>
            <el-button type="primary" icon="el-icon-plus" :loading="loading" @click="$refs.form.submit()">新增</el-button>
            <el-button type="primary" icon="el-icon-circle-check" :loading="loading" @click="$refs.form.submit()">修改
            </el-button>
            <el-button icon="el-icon-circle-close" @click="$refs.modal_1.handleClose()">取消</el-button>
        </template>
    </modal>
</template>

<script>
    import {FormMixin} from "@/mixins/FormMixin";

    export default {
        name: "modalForm",
        data() {
            return {
                title: "我是标题",
                isCloseConfirm: true,
                type: "",
                option: {
                    submitBtn: false,
                    emptyBtn: false,
                    column: [
                        {
                            label: '通知标题',
                            prop: 'title',
                            span: 24,
                            row: true,
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知标题',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知类型',
                            type: 'select',
                            dicUrl: '/blade-system/dict/dictionary?code=notice',
                            props: {
                                label: 'dictValue',
                                value: 'dictKey',
                            },
                            dataType: 'number',
                            slot: true,
                            prop: 'category',
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知类型',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知日期',
                            prop: 'releaseTime',
                            type: 'date',
                            format: 'YYYY-MM-DD HH:mm:ss',
                            valueFormat: 'YYYY-MM-DD HH:mm:ss',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知日期',
                                    trigger: 'click',
                                },
                            ],
                        },
                        {
                            label: '通知内容',
                            prop: 'content',
                            component: 'avue-ueditor',
                            options: {
                                action: '/blade-resource/oss/endpoint/put-file',
                                props: {
                                    res: 'data',
                                    url: 'link',
                                },
                            },
                            hide: true,
                            minRows: 4,
                            span: 24,
                        },
                    ],
                },
                // 配置项
                formMixinConfig: {
                    // 对应的api目录下 js文件
                    api: "demo/demo_api", // == @/api/demo/demo_api.js

                    // 启动自动加载详情 只针对默认模式
                    enabledAutoLoadDetail: false,
                },
            }
        },
        mixins: [FormMixin],
        methods: {
            show(option) {
                this.title = option.title;
                this.type = option.type;
                // this.form.id = option.id;
                this.form = option.data;
                this.isCloseConfirm = this.type !== "view";
                this.option.detail = this.type === "view";
                this.$refs.modal_1.show();
            },
            /**
             *  modal 被打开
             */
            opened() {
                // this.onLoadDetail();
                console.log("opened")
            },
            /**
             * 提交成功之后
             */
            submitAfter() {
                this.$refs.modal_1.hide()
            }
        }
    }
</script>

<style scoped>

</style>